<template>
  <div class="wrap">
    <ul
      class="warp"
      v-if="props.res"
      v-for="(item, index) in props.res"
      :key="item.id"
    >
      <li class="warpLi">
        <div>
          <a href="#">
            <SvgIcon icon="icon-yunhang" class="login"></SvgIcon>
          </a>
        </div>

        <a href="#" class="sear">
          <span>{{ item.name }}</span>

          <SvgIcon icon="icon-MV" class="login"></SvgIcon>
        </a>
        <div class="svg">
          <a href="#">
            <SvgIcon icon="icon-jiajianzujianjiahao" class="login"></SvgIcon>
          </a>
          <a href="#">
            <SvgIcon icon="icon-xiazai1" class="login"></SvgIcon>
          </a>
          <a href="#">
            <SvgIcon icon="icon-fenxiang" class="login"></SvgIcon>
          </a>
          <a href="#">
            <SvgIcon icon="icon-a-11Gyidongwenjianjia" class="login"></SvgIcon>
          </a>
        </div>
        <div class="text">
          <!-- <a href="#">{{ item.ar[0].name }}</a> -->
          <a href="#" v-if="item">{{
            item.ar.map((i: album) => i.name).join('/')
          }}</a>
        </div>
        <div class="text">
          <a>
            《<span>{{ item.al.name }}</span
            >》
          </a>
        </div>
        <div class="time">13:12</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'singerres',
}
</script>

<script lang="ts" setup>
import { album } from '@/api/model/album'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
// console.log(route.params);
const props = defineProps<{ res: any }>()

console.log(props)
</script>

<style scoped>
.warp {
  width: 900px;
  /* border: 1px solid #000; */
  /* margin-top: 20px; */
}
ul:nth-child(even) {
  background-color: #f7f7f7;
}
.warpLi {
  padding: 10px 10px 8px 18px;
  border: 1px solid #fff;
  display: flex;
  justify-content: space-between;
}

.login {
  width: 17px;
  height: 17px;
  cursor: pointer;
  color: #999;
  margin-right: 2px;
}

.login:hover {
  color: #333;
}

.sear {
  width: 370px;
  display: flex;
}
.svg {
  width: 96px;
  margin-right: 10px;
}
.svg .login {
  margin-right: 7px;
}
.text {
  width: 156px;
}

span {
  color: #0c73c2;
}

.wrap {
  height: 900px;
}
.time {
  color: red;
}
</style>
